<template>
  <div class="commList">
    <el-space>
      <el-input placeholder="输入商品名称" v-model="search.name" />
      <el-input placeholder="输入商品条形码" v-model="search.barcode" />
      <el-select placeholder="请选择商品状态" v-model="search.status" clearable>
        <el-option :label="item.label" :value="item.value" v-for="item in selectStatus" :key='item.value' />
      </el-select>
      <el-cascader :options="category" :props="part" v-model="search.categoryId" clearable />
      <el-button type='primary' :icon='Search' v-btnkey='"product:product:list"' @click="initData()">查找</el-button>
      <el-button type='primary' :icon='Plus' v-btnkey='"product:product:create"' @click="add">添加</el-button>
    </el-space>
    <!-- 表格 -->
    <el-table :data="tableList" style="width: 100%;margin-top:10px" border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
      <el-table-column type="selection" />
      <el-table-column type="expand" label="sku信息" width="80px">
        <template #default='scope'>
          <el-table :data="scope.row.skuList" border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
            <el-table-column label="商品条形码" prop="barCode" />
            <el-table-column label="商品规格" prop="title" />
            <el-table-column label="商品库存" prop="stock" />
            <el-table-column label="原价" prop="originalPrice" />
            <el-table-column label="现价" prop="price" />
            <el-table-column />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="商品ID" prop="id">
      </el-table-column>
      <el-table-column label="名称" prop="title" width="150px">
      </el-table-column>
      <el-table-column label="图片">
        <template #default='scope'>
          <el-image :src='scope.row.img' style="width:30px" />
        </template>
      </el-table-column>
      <el-table-column label="商品详情介绍">
        <template #default='scope'>
          <el-button type='primary' v-btnkey="'product:product:detail'" @click="examine(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="类目ID" prop="categoryId">
      </el-table-column>
      <el-table-column label="邮费模板ID" prop="freightTemplateId">
      </el-table-column>
      <el-table-column label="销量" prop="sales">
      </el-table-column>
      <el-table-column label="单位" prop="unit">
      </el-table-column>
      <el-table-column label="是否在售">
        <template #default='scope'>
          <el-tag :type="scope.row.status?'success':'warning'">{{scope.row.status?'在售':'下架'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default='scope'>
          <el-button type='primary' v-btnkey="'product:product:edit'" @click="edit(scope.row)">编辑</el-button>
          <el-button type='primary' @click="status(scope.row)">{{scope.row.status?'下架':'上架'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看详情框 -->
    <el-dialog v-model="dialogFormVisible" title="商品详情">
      <p v-html="imga" class="pic"></p>
    </el-dialog>
    <!-- 分页 -->
    <Paging v-bind="pageData" @pageChang="pageChang"></Paging>
  </div>
</template>

<script>
import { Discount, Plus, Search } from '@element-plus/icons-vue';
import { post } from "@/utils/http";
import { Paging } from "@/components/Paging/Paging.vue";
import { debounce } from "@/utils/debounce";
export default {
  components: { Paging },
  setup() {
    return { Plus, Search }
  },
  data() {
    return {
      search: {  //搜索数据
        name: '',
        barcode: '',
        status: null,
        categoryId: null
      },
      tableList: [],
      pageData: {  //分页数据
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      category: [],  //类目数据
      selectStatus: [{ label: "下架", value: 0 }, { label: "正常", value: 1 }], //选择状态
      dialogFormVisible: false,  //查看框显示
      imga: '', //富文本图片
      part: { //子集配置
        label: 'title',
        children: 'childrenList',
        value: 'id',
        emitPath: false
      }
    }
  },
  methods: {
    initData() {
      post({ _gp: 'admin.product', _mt: 'list', categoryId: this.search.categoryId, title: this.search.name, barcode: this.search.barcode, status: this.search.status, page: this.pageData.currentPage, limit: this.pageData.pageSize }).then(res => {
        if (200 == res.errno) {
          this.tableList = res.data.items
          this.pageData.total = res.data.total
        } else {
          ElMessage.warning(res.errmsg)
        }
      })
    },
    categoryTree() { //类目
      post({ _gp: 'admin.category', _mt: 'categoryTree' }).then(res => {
        this.category = res.data
      })
    },
    // 查看
    examine(row) {
      this.dialogFormVisible = true
      post({ _gp: 'admin.product', _mt: 'detail', spuId: row.id }).then(res => {
        this.imga = res.data.detail
      })
    },
    // 分页
    pageChang(e) {
      Object.assign(this.pageData, e)
      this.initData()
    },
    // 添加
    add() {
      this.$router.push('create')
    },
    // 状态
    status: debounce(function (row) {
      let state = row.status ? 0 : 1
      post({ _gp: 'admin.product', _mt: 'freezeOrActivation', spuId: row.id, status: state }).then(res => {
        if (200 == res.errno) {
          ElMessage.success(state ? '下架成功' : '上架成功')
          this.initData()
        } else {
          ElMessage.warning(res.errmsg)
        }
      })
    }, 500),
    // 编辑
    edit(row) {
      this.$router.push({ name: 'editName', params: { id: row.id } })
    }
  },
  created() {
    this.categoryTree()
    this.initData()
  },

}
</script>

<style lang="less" scoped>
/deep/.pic img {
  width: 720px;
}
/deep/.desc_anchor {
  height: 0px;
}
/deep/.pic img[size="395x395"] {
  width: 350px;
}
</style>